import { useState, useEffect } from 'react';
function useFetch(url: string, query: any) {
 const [loading, setLoading] = useState(true);
 const [error, setError] = useState([]);
 const [data, setData] = useState([]);
 console.log(query);
 useEffect(() => {
  const abortCont = new AbortController();
  setLoading(true);
  fetch(url, { signal: abortCont.signal })
   .then(res => {
    if (!res.ok) {
     throw Error('could not fetch the data for that resource');
    }
    return res.json();
   })
   .then(data => {
    setData(data);
    setLoading(false);
   }).catch(err => {
    if (err.name === 'AbortError') {
     console.log('fetch aborted');
    } else {
     setLoading(false);
     setError(err.message);
    }
   })
  return () => abortCont.abort();
 }, [url])
 return { loading, error, data };
}

export default useFetch;